<template>
	<view>
		<view class="head">
			<view class="headImg">
				<image :src="head_img" mode=""></image>
			</view>
			<view class="right">
				<view class="nickName">{{name}}<image src="/static/image/attestation1.png"></image><text>母婴学院认证</text></view>
				<view class="desc">服务项目: 住家月子服务({{array[index]}}天)</view>
			</view>
		</view>
		<form @submit="formSubmit">
			<view class="userInfo">
				<view class="title">联系信息</view>
				<view class="item">
					<view class="left">联系人</view>
					<input type="text" value="" placeholder="请输入您的姓名" placeholder-style="color:#878787" name="name" />
				</view>
				<view class="item">
					<view class="left">联系电话</view>
					<input type="text" value="" placeholder="请输入您的手机号" placeholder-style="color:#878787" name="mobile" />
				</view>
				<view class="item">
					<view class="left">详细地址</view>
					<input type="text" value="" placeholder="街道/楼号/门牌号" placeholder-style="color:#878787" name="address" />
				</view>
			</view>
			<view class="serveInfo">
				<view class="title">服务信息</view>
				<view class="item">
					<view class="left">预约时间</view>
					<view class="uni-list-cell-db">
			            <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
			                <view class="uni-input">{{date}}</view>
			            </picker>
			        </view>
					<uni-icon type="arrow" size="18" color="#878787"></uni-icon>
				</view>
				<view class="item">
					<view class="left">服务天数</view>
					<view class="uni-list-cell-db">
					    <picker @change="bindPickerChange" :value="index" :range="array">
					        <view class="uni-input">{{array[index]}}</view>
					    </picker>
					</view>
					<uni-icon type="arrow" size="18" color="#878787"></uni-icon>
				</view>
			</view>
			<view class="priceTotal">
				<view class="title">费用合计</view>
				<view class="item">
					<view class="left">优惠券</view>
					<view class="right" @click="openUsableCoupon">{{desc}}</view>
					<uni-icon type="arrow" size="18" color="#878787" @click="openUsableCoupon"></uni-icon>
				</view>
				<view class="item">
					<view class="left">住家月子服务({{array[index]}}天)</view>
					<view class="right" style="color: #000;">￥{{price}}元</view>
				</view>
				<view class="hint">
					<view class="title">温馨提示: </view>
					<view class="desc">
						月子服务期间如遇到国家法定节假日(春节除外),需额外支付1倍工资,春节需额外支付2倍工资,请在月嫂开始服务当天另行支付。
					</view>
				</view>
			</view>
			<view class="remark">
				<view class="title">备注: </view>
				<textarea value="" placeholder="备注您的特殊要求,我们会尽量满足您.." placeholder-style="color: #878787;font-size:12px;" @input="bindTextArea" name="remark" />
				<text>{{cursor}}/140</text>
			</view>
			<view class="agreement">
				<checkbox-group @change="bindcheckbox">
					<checkbox :value="value" checked color="#f4984b" />
					阅读并同意<text @click="openProtocol">《第三方家庭服务协议》</text>
				</checkbox-group>
			</view>
			<button class="priceBtn" form-type="submit">立即支付</button>
		</form>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import { dns } from "@/pages/dns.js";
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				head_img: '',
				name: '',
				cursor: 0,//备注的字数
				value: [''],//监听是否checkbox是否选中
				array: ['26', '27', '28', '29','30','31','32','33','34','35','36','37','38','39','40','41','42',
				'43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59','60'],
				index: 0,
				date: currentDate,
				matron_id: '',//月嫂id
				price: '',//26天价格
				mean_price: '',//均价
				coupon_price: 0,//优惠券免减价格
				coupon: '',//优惠券id
				desc: '查看可用优惠券'
			}
		},
		watch:{
			value(newVal,oldVal){
				// console.log(newVal,oldVal)
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
	    components: {
			uniIcon
		},
		onLoad(e) {
			this.matron_id = e.matron_id;//月嫂id
			this.head_img = e.head_img;//月嫂头像
			this.name = e.name;//月嫂姓名
			this.price = e.price;//价格
			this.mean_price = e.price / 26;//日平均价格
		},
		onShow() {
			let pages = getCurrentPages();
			let currPage = pages[pages.length-1];
			if(currPage.coupon){
				this.coupon = currPage.coupon
				this.coupon_price = currPage.coupon_price;
				this.desc = "￥-" + this.coupon_price;
				this.price = ((this.array[this.index] * this.mean_price).toFixed(2))-this.coupon_price;
			}
		},
		methods:{
			bindPickerChange: function(e) {//天数
				this.index = e.target.value;
				this.coupon_price = 0;//将优惠券免减金额归零
				this.price = ((this.array[this.index] * this.mean_price).toFixed(2))-this.coupon_price;//改变总金额
				this.desc = '查看可用优惠券';//每次选择日期都强制用户重新选择优惠券
				this.coupon = '';//清空id
			},
			bindDateChange: function(e) {//日期
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindTextArea(e){//输入框输入事件
				this.cursor = e.detail.cursor;
			},
			bindcheckbox(e){//checkbox监听是否选中
				this.value = e.detail.value
				console.log(e.detail.value)
			},
			openUsableCoupon(){//查看可用优惠券
				uni.navigateTo({
					url: './usablecoupon/index?price='+this.price
				})
			},
			openProtocol(){//查看用户协议
				uni.navigateTo({
					url: './protocol/index'
				})
			},
			formSubmit(e){//立即提交
				// console.log(e)
				var name = e.detail.value.name;
				var mobile = e.detail.value.mobile;
				var address = e.detail.value.address;
				var remark = e.detail.value.remark;
				if(name == ''|| mobile == ''|| address == ''){
					uni.showToast({
						icon: 'none',
						title: '请完善您的服务信息!'
					})
					return;
				}
				var length = this.value.length;
				if(length !== 1){//强制用户选中checkbox
					uni.showToast({
						icon: 'none',
						title: '请阅读并同意服务协议!'
					})
					return;
				}
				uni.request({
					method: 'POST',
					data: {
						name: name,
						matron_id: this.matron_id,
						mobile: mobile,
						address: address,
						start_time: this.date,
						days: this.array[this.index],
						coupon: this.coupon,
						remark: ''
					},
					header:{
						token: uni.getStorageSync("token")
					},
					url: dns + 'order/add',
					success: (res)=>{
						console.log(res);
						if(res.data.status == 1){
							let order_id = res.data.order_id;
							uni.request({
								method:'GET',
								data: {
									id: order_id
								},
								header:{
									token: uni.getStorageSync("token")
								},
								url: dns + 'pay/getdata',
								success: (res)=>{
									// console.log(res)
									if(res.data.status == 1){
										uni.requestPayment({
										    provider: 'wxpay',
										    timeStamp: res.data.data.timeStamp+'',
										    nonceStr: res.data.data.nonceStr,
										    package: res.data.data.package,
										    signType: 'MD5',
										    paySign: res.data.data.paySign,
										    success: function (res) {
										        uni.showToast({
										        	title:'支付成功!'
										        })
												uni.setStorageSync("itemActive",1);
												setTimeout(()=>{
													uni.switchTab({
														url: '/pages/order/index'
													})
												},1000)
										    },
										    fail: function (err) {
												uni.showToast({
													icon: 'none',
													title:'支付失败!'
												})
												uni.setStorageSync("itemActive",0);
												setTimeout(()=>{
													uni.switchTab({
														url: '/pages/order/index'
													})
												},1000)
										    }
										});
									}
								}
							})
						};
						if(res.data.status == 0){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	$text-color: #878787;
	page{
		background-color: #f6f6f6;
	}
	.head{
		display: flex;
		margin-top: 20upx;
		background-color: #fff;
		padding: 30upx 30upx;
		.headImg{
			width: 140upx;
			height: 140upx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 20upx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.nickName{
				font-size: 34upx;
				margin-bottom: 6upx;
				vertical-align:middle;
				font-weight: bold;
				image{
					width: 32upx;
					height: 32upx;
					line-height: 36upx;
					margin-left: 14upx;
					vertical-align:middle;
				}
				text{
					font-size: 20upx;
					color: #f5994c;
					vertical-align:middle;
				}
			}
			.desc{
				font-size: 30upx;
			}
		}
	}
	.userInfo{
		.title{
			padding: 0 30upx;
			line-height: 70upx;
			background-color: #f6f6f6;
			font-size: 30upx;
			color: $text-color;
		}
		.item{
			position: relative;
			padding: 0 30upx;
			display: flex;
			line-height: 70upx;
			font-size: 28upx;
			background-color: #fff;
			border-bottom: 1px solid #eee;
			.left{
				width: 140upx;
			}
			input{
				height: 70upx;
			}
			uni-icon{
				position: absolute;
				right: 30upx;
				top: 8upx;
			}
		}
	}
	.serveInfo{
		.title{
			padding: 0 30upx;
			line-height: 70upx;
			background-color: #f6f6f6;
			font-size: 30upx;
			color: $text-color;
		}
		.item{
			position: relative;
			padding: 0 30upx;
			display: flex;
			line-height: 70upx;
			font-size: 28upx;
			background-color: #fff;
			border-bottom: 1px solid #eee;
			.left{
				width: 140upx;
			}
			.uni-list-cell-db{
				flex: 1;
				picker{
					width: 100%;
				}
			}
			input{
				height: 70upx;
			}
			uni-icon{
				position: absolute;
				right: 30upx;
				top: 8upx;
			}
		}
	}
	.priceTotal{
		.title{
			padding: 0 30upx;
			line-height: 70upx;
			background-color: #f6f6f6;
			font-size: 30upx;
			color: $text-color;
		}
		.item{
			position: relative;
			padding: 0 30upx;
			display: flex;
			line-height: 70upx;
			font-size: 28upx;
			background-color: #fff;
			border-bottom: 1px solid #eee;
			display: flex;
			.left{
				width: 300upx;
			}
			.right{
				flex: 1;
				text-align: right;
				padding-right: 40upx;
				color: #f4984b;
			}
			uni-icon{
				position: absolute;
				right: 30upx;
				top: 8upx;
			}
		}
		.hint{
			.title{
				padding: 0 30upx;
				line-height: 70upx;
				font-size: 28upx;
				background-color: #fff;
				color: #000;
			}
			.desc{
				font-size: 26upx;
				color: $text-color;
				background-color: #fff;
				padding: 0 30upx;
				padding-bottom: 20upx;
				text-indent: 2em;
			}
		}
	}
	.remark{
		position: relative;
		margin-top: 20upx;
		background-color: #fff;
		padding: 0 30upx;
		.title{
			line-height: 70upx;
			font-size: 30upx;
			border-bottom: 1px solid #f6f6f6;
		}
		textarea{
			width: 100%;
			height: 200upx;
			padding-top:10px;
			color: #878787;
			font-size:12px;
		}
		text{
			position: absolute;
			bottom: 20upx;
			right: 30upx;
			font-size: 24upx;
			color: #878787;
		}
	}
	.agreement{
		padding: 30upx 20upx;
		font-size: 22upx;
		checkbox{
			transform:scale(0.7);
			color: #f4984b;
			margin-right: 6upx;
		}
		text{
			color: #f4984b;
		}
	}
	.priceBtn{
		width: 100%;
		line-height: 80upx;
		color: #fff;
		font-size: 32upx;
		background-color: #f4984b;
		border-radius: 0;
	}
</style>
